// px转换为rem
@function pxToRem($px, $base: 750px) {
    $min: 1 / $base * 10 * 1;
    $result: $px / $base * 10 * 1;

    @if $result < 0.027 and $result > 0 {
        @return 2px;
    }

    @else {
        @return $px / $base * 10 * 1rem;
    }
}

// 设置dpr下的字体大小
@mixin font-dpr($font-size, $line-height: $font-size) {
    font-size: $font-size / 2;

    @if $line-height != none {
        line-height: $line-height / 2;
    }

    [data-dpr="2"] & {
        font-size: $font-size;

        @if $line-height != none {
            line-height: $line-height;
        }
    }

    [data-dpr="3"] & {
        font-size: $font-size * 3 / 2;

        @if $line-height != none {
            line-height: $line-height * 3 / 2;
        }
    }
}

@font-face {
    font-family: 'PingFang Regular';
    src: url('../font/enroll/PingFang Regular.eot');
    src:
      url('../font/enroll/PingFang Regular.eot?#font-spider') format('embedded-opentype'),
      url('../font/enroll/PingFang Regular.ttf') format('truetype'),
      url('../font/enroll/PingFang Regular.woff') format('woff'),
      url('../font/enroll/PingFang Regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
  }

@keyframes ball
{
    from {
        transform: scale(1,1);
    }
    to {
        transform: scale(1.1,1.1);
    }
}

@keyframes enrollBelow
{
    from {
        transform: scale(1,1);
    }
    to {
        transform: scale(1.1,1.1);
    }
}

.index-progress{
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #f3d548;

    .badge{
        width: pxToRem(122px);
        height: pxToRem(135px);
        display: block;
        position: absolute;
        left: pxToRem(10px);
        top: pxToRem(10px);
    }

    .logo{
        width: pxToRem(624px);
        height: pxToRem(568px);
        display: block;
        margin: pxToRem(300px) auto 0;
    }

    .progress-bar{
        width: pxToRem(550px);
        height: pxToRem(16px);
        background-color: rgba(255, 255, 255, 0.5);
        margin: pxToRem(150px) auto pxToRem(45px);
        border-radius: pxToRem(16px);

        .progress{
            width: 0;
            height: pxToRem(16px);
            background-color: #6fdfff;
            border-radius: pxToRem(16px);
        }
    }

    .loading-progress{
        @include font-dpr(26px);
        color: #333333;
        text-align: center;
    }
}

.star-yell{
    width: 100%;
    height: 100%;
    position: fixed;
    background: #000;

    .star-video{
        width: 100%;
        display: block;
    }

    .star-play{
        width: pxToRem(187px);
        height: pxToRem(187px);
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
        z-index: 2;
    }

    .jump{
        width: pxToRem(160px);
        height: pxToRem(60px);
        display: block;
        top: pxToRem(35px);
        right: pxToRem(35px);
        position: absolute;
        z-index: 2;
    }
}

.index-container{
    width: 100%;
    background-image: url('../images/index/indexBackground.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-family: 'PingFang Regular';

    .header{
        width: 100%;
        color: #f6d448;

        .header-bg{
            width: 100%;
            display: block;
        }

        .rule{
            width: pxToRem(161px);
            position: absolute;
            top: pxToRem(65px);
            right: pxToRem(20px);
            z-index: 1;

            .rule-img{
                width: 100%;
                display: block;
            }
        }


        .action{
            position: absolute;
            z-index: 1;
            right: 0;
            left: pxToRem(-10px);
            margin: 0 auto;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            width: pxToRem(294px);
            height: pxToRem(285px);
            top: pxToRem(898px);
            animation: ball .5s infinite alternate;
        }

        .enroll{
            background-image: url('../images/index/enroll2.png');
        }

        .upload{
            background-image: url('../images/index/upload.png');
        }

        .invitation{
            background-image: url('../images/index/invitation.png');
        }
        .next-arrow{
            width: pxToRem(324px);
            height: pxToRem(50px);
            position: absolute;
            left: 50%;
            bottom: pxToRem(150px);
            margin-left: pxToRem(-162px);
            background-size: 100%;
            background-image: url('../images/index/next2.png');
            z-index: 999;
        }
    }

    .host{
        width: pxToRem(678px);
        height: pxToRem(505px);
        margin: pxToRem(50px) auto pxToRem(40px);
        background-image: url('../images/index/host.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .small-site{
        width: pxToRem(750px);
        height: pxToRem(1050px);
        background: url(../images/index/learnBackground.png) 0 0 no-repeat;
        background-size: 100%;
        position: relative;
        font-family: 'PingFangSC-Regular','PingFang';
        overflow: hidden;
    
        .site-btn{
            width: pxToRem(172px);
            height: pxToRem(92px);
            background: url(../images/index/stationNormal.png) center center;
            background-size: 100%;
            position: absolute;
            @include font-dpr(28px,88px);
            text-align: center;
            color: #fff;
        }
        .site-btn1{
            top: pxToRem(288px);
            left: pxToRem(50px);
        }
        .site-btn2{
            top: pxToRem(275px);
            left: pxToRem(294px);
        }
        .site-btn3{
            top: pxToRem(288px);
            left: pxToRem(549px);
        }
        .site-btn.active{
            background: url(../images/index/stationActive.png) center center;
            background-size: 100%;
        }
        .swiper-container {
            width: 100%;
            height: 211px;
            margin-top: pxToRem(450px);
            padding-top: pxToRem(20px);
        }
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            background: url(../images/index/screen.png);
            background-size:100%; 
            width: 290px !important;
            position: relative;
        
            .video_pic{
                width: 250px;
                height: 140px;
                margin: 16px auto 10px;
                border-radius: 8px;
            }
            .learning{
                width: 52px;
                height: 52px;
                position: absolute;
                top:-10px;
                right: -10px;
                background: url(../images/index/learning.png);
                background-size: 100%;
                z-index: 999;
            }
            .video_play{
                width: 43px;
                height: 42.5px;
                background: url(../images/index/play.png);
                background-size: 100%;
                position: absolute;
                top: 60px;
                left: 50%;
                margin-left: -21.5px;
                z-index: 999;
            }
            .poster-img{
                width: 250px;
                height: 140px;
                position: absolute;
                top: 17px;
                left: 21px;
                z-index: 998;
                border-radius: 8px;
            }
            .title{
                @include font-dpr(34px);
                margin: -4px auto 0;
                font-weight: bold;
                font-family:'PingFangSC-Semibold','PingFang';
                color: #58595b;
                padding-left: 15px;
            }
            .intro{
                @include font-dpr(26px);
            }
        }
        .slide-lr{
            width: pxToRem(339px);
            height: pxToRem(49px);
            margin: pxToRem(10px) auto 0;
            background: url(../images/index/slideHint.png);
            background-size: 100%;
            transition: all 0.5s;
        }
    }

    .star-cheer{
        width: pxToRem(750px);
        height: pxToRem(1349px);
        margin: pxToRem(48px) auto pxToRem(70px);
        background-image: url('../images/index/starCheer.png?1');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        .qcode{
            width: pxToRem(284px);
            height: pxToRem(284px);
            position: absolute;
            top:pxToRem(647px);
            left: pxToRem(420px);
            z-index: 5;
        }
        .qcodeBox{
            width: pxToRem(315px);
            height: pxToRem(318px);
            position: absolute;
            top:pxToRem(635px);
            left: pxToRem(407px);
            z-index: 4;
            border-radius: pxToRem(33px);
        }
        .watch{
            width: pxToRem(546px);
            height: pxToRem(361px);
            position: absolute;
            top:pxToRem(350px);
            left: pxToRem(60px);
            border-radius: pxToRem(25px);
            z-index: 3;
        }
        .advertise-container{
            width: pxToRem(678px);
            height: pxToRem(256px);
            position: absolute;
            top:pxToRem(1072px);
            left: pxToRem(35px);
            right: pxToRem(35px);
            margin: 0 auto;

            .adv{
                width: pxToRem(678px);
                height: pxToRem(256px);
                border-radius: pxToRem(10px);
            }
        }
        .word{
            color: #333333;
            @include font-dpr(28px,48px);
            text-align: right;
            position: absolute;
            top:pxToRem(800px);
            left: pxToRem(50px);
        }
    }

    .enroll-progress{
        width: pxToRem(750px);
        height: pxToRem(988px);
        margin: 0 auto pxToRem(60px);
        background-image: url('../images/index/enrollProgress.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;

        .enroll-below{
            width: pxToRem(130px);
            height: pxToRem(135px);
            background-image: url('../images/index/enrollBelow.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            display: block;
            position: absolute;
            top: pxToRem(393px);
            right: pxToRem(20px);
            animation: enrollBelow .5s infinite alternate;
            z-index: 999;
        }

        .column1{
            position: absolute;
            top: pxToRem(320px);
            left: pxToRem(260px);
            @include font-dpr(32px);
            color: #58595b;
        }

        .column2{
            position: absolute;
            top: pxToRem(440px);
            left: pxToRem(260px);
            @include font-dpr(32px);
            color: #58595b;
        }

        .column3{
            position: absolute;
            top: pxToRem(560px);
            left: pxToRem(260px);
            @include font-dpr(32px);
            color: #58595b;
        }

        .column4{
            position: absolute;
            top: pxToRem(685px);
            left: pxToRem(260px);
            @include font-dpr(32px);
            color: #58595b;
        }

        .column5{
            position: absolute;
            top: pxToRem(800px);
            left: pxToRem(260px);
            @include font-dpr(32px);
            color: #58595b;
        }
    }

    .operation{
        width: pxToRem(750px);
        height: pxToRem(321px);
        margin: 0 auto pxToRem(55px);
        background-image: url('../images/index/operation.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .footer{
        width: pxToRem(750px);
        height: pxToRem(87px);
        background-image: url('../images/index/copyRight.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
}

@media (device-width:320px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/5 */
    .index-container .star-cheer .word {
        @include font-dpr(16px,36px);
    }
}